<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加单词</title>

    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap-theme.min.css}" href="../../static/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" href="../../static/bootstrap/css/bootstrap.min.css">
    <script th:src="@{/bootstrap/jquery/jquery-3.4.1.min.js}" src="../../static/bootstrap/jquery/jquery-3.4.1.min.js" type="application/javascript"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}" src="../../static/bootstrap/js/bootstrap.min.js" type="application/javascript"></script>
</head>
<body>
<!--大小 386*563-->
<div class="bs-example" data-example-id="contextual-panels">
    <div class="panel panel-primary">
        <div class="panel-heading" style="text-align: center">
            <h3 class="panel-title">欢迎使用"我的单词"软件</h3>
        </div>
    </div>
    <div class="panel panel-success" style="margin-top: 50px;margin-left: 10%;margin-right: 10%">
        <div class="panel-heading" style="text-align: center">
            <h3 class="panel-title">单词添加界面</h3>
        </div>
    </div>

    <form id="add_form" th:action="@{/addWordMethod}">
        <div class="panel panel-info"  style="margin-top: 30px;margin-left: 10%;margin-right: 10%">
            <div class="panel-heading">
                <h3 class="panel-title">英文单词</h3>
            </div>
            <div class="panel-body">
                <input name="english" type="text" class="form-control" placeholder="请输入一个英文单词">
            </div>
        </div>
        <div class="panel panel-warning"  style="margin-left: 10%;margin-right: 10%">
            <div class="panel-heading">
                <h3 class="panel-title">中文意思</h3>
            </div>
            <div class="panel-body">
                <input name="chinese" type="text" class="form-control" placeholder="请输入该单词的中文意思">
            </div>
        </div>

        <div style="margin-left: 10%;margin-right: 10%">
            <button class="btn btn-default"><a href="/">返回</a></button>
            <div style="float:right;">
                <button type="button" id="submit_btn" class="btn btn-default" style="background-color: #4cae4c">提交</button>
            </div>
        </div>
    </form>

    <div class="layui-login-text" style="margin-top: 50px;margin-left: 10%;margin-right: 10%;text-align: center">
        <p>© 2019 薛国鹏 版权所有 联系方式(qq)：2043928998</p>
    </div>

</div>

    <!--提交功能-->
    <script type="text/javascript">

    $(function(){

        //判断是否有中文的函数
        var isChinese = function (str) {
            var reg = /[^\x00-\xff]/ig;//判断是否存在中文和全角字符
//    var reg=/[A-Za-z]*[a-z0-9_-]|\s$/;//判断是否包含数字字母下划线  当使用这个时如果只有部分是中文字符还可以使用英文字体
            if (reg.test(str)) {
                return true;//存在中文
            }
            return false;//不存在中文
        }

        //登录链接测试，使用时可删除
        $("#submit_btn").click(function(){

            var english = $(" input[ name='english' ] ").val().trim();
            var chinese = $(" input[ name='chinese' ] ").val().trim();
/*            alert(english);
            alert(chinese);*/

            if(english.length == 0 || chinese.length == 0) {
                //进行判空校验
                alert("你填写的单词信息不完整");
            }else if(isChinese(english) == true){
                alert("你填写的单词不对");
            }else if(isChinese(chinese) == false) {
                alert("你填写的中文意思格式不对");
            }else {
                var targetUrl = $("#add_form").attr("action");
                var data = $("#add_form").serialize();

                $.ajax({
                    type:'post',
                    url:targetUrl,
                    cache: false,
                    data:data,  //重点必须为一个变量如：data
                    dataType:'json',
                    success:function(data){
                        if(data == "1") {
                            alert("添加成功");
                            $(" input[ name='english' ] ").val("");
                            $(" input[ name='chinese' ] ").val("");
                        }else if(data == "0") {
                            alert("添加失败");
                        }else {
                            alert(data);
                        }

                    },
                    error:function () {
                        alert("请求失败");
                    }
                })
            }
        })
    });
</script>

</body>
</html>